<template>
  <div class="about">
    <div>
      <a href="https://vitejs.dev" target="_blank">
        <img src="/vite.svg" class="logo" alt="Vite logo" />
      </a>
      <a href="https://vuejs.org/" target="_blank">
        <img src="@/assets/vue.svg" class="logo vue" alt="Vue logo" />
      </a>
    </div>
    <HelloWorld msg="Vite + Vue" />
    <van-button type="primary">vant按钮</van-button>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.about {
  margin: 0 auto;
  text-align: center;
  color: #ccc;
  padding: 20px;
}
.card {
  padding: 2em;
}
a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

@media (prefers-color-scheme: light) {
  // :root {
  //   color: #213547;
  //   background-color: #ffffff;
  // }
  // a:hover {
  //   color: #747bff;
  // }
  // button {
  //   background-color: #f9f9f9;
  // }
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
